<template>
  <div class="screensaver">
    <swiper
      class="swiper-container"
      :options="swiperOptions"
    >
      <swiper-slide
        v-for="(item, index) in screenList"
        :key="index"
        class="swiper-slide"
      >
        <img :src="item.src" class="play-video" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { mapGetters } from 'vuex'
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        swiperOptions: {
          slidesPerView: 1,
          centeredSlides: true,
          spaceBetween: 0,
          autoplay: {
            delay: 20000,
            disableOnInteraction: false,
          },
          loop: true,
        },
      }
    },
    computed: {
      ...mapGetters(['screenList'])
    }
  }
</script>

<style lang="less" scoped>
.screensaver{
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(243, 119, 120, 0.5);
  .play-video{
    display: block;
    width: 100vw;
    height: 100vh;
  }
}
</style>